<template>
  <div>
    <common-head title="购物车" ></common-head>
    <div class="wrap">
      <div class="items">
        <van-swipe-cell v-for="(item, index) in items" :key="item.id">
          <div class="item">
            <van-checkbox @click="itemCheckClick(index)" v-model="item.checked"/>
            <van-card
              :num="item.num"
              :price="item.minPrice"
              :title="item.name"
              :thumb="item.pic"
            > 
              <template #footer>
                <van-stepper @change="itemNumchange" v-model="item.num"></van-stepper>
              </template>
            </van-card>
          </div>
          <template #right>
              <van-button square text="删除" 
              @click="delItem(index)"
              type="danger" class="delete-button" />
          </template>
        </van-swipe-cell>
      </div>
      <van-submit-bar :price="total*100" button-text="提交订单" @submit="onSubmit">
        <van-checkbox v-model="allChecked">全选</van-checkbox>
      </van-submit-bar>
    </div>
    <my-tabbar/>
 </div>
</template>

<script>
import MyTabbar from '@components/MyTabbar'
import{ mapState, mapMutations } from 'vuex'
import CommonHead from '@components/CommonHead'
import { Dialog } from 'vant';
export default {
  data () {
    return {
    }
  },
  mounted () {
    this.calc_total()
  },
  methods: {
    delItem (index) {
      Dialog.confirm({
      title: '删除商品',
      message: '您确认删除吗',
    })
      .then(() => {
        // on confirm
        this.del_item(index)
      })
      .catch(() => {
        // on cancel
  });
    },
    itemCheckClick (i) {
      this.set_single_checked (
      {
        index: i,
        checked: this.items[i].checked
      })
      const allChecked = this.items.every(item => item.checked)
      this.set_allChecked(allChecked)
      this.calc_total()
    },
    onSubmit () {
      const currentOrder = {
        id: Date.now(),
        code: Date.now(),
        status: 0,
        items: this.items.filter(item => item.checked),
        tolal: this.total,
        contact: {
        }
      }
      this.set_order(currentOrder)
      this.$router.push('/currentOrder')
    },
    itemNumchange() {
      this.updata_items(this.items)
      this.calc_total()
    },
    ...mapMutations('cart', ['calc_total','updata_items','set_single_checked','set_allChecked','set_all_single_checked','del_item'],),
    ...mapMutations('order', ['set_order'])
  },
  computed: {
    ...mapState({
       items: state => JSON.parse(JSON.stringify(state.cart.items)),
       total: state => state.cart.total,
    }),
    allChecked: {
         get () {
           return this.$store.state.cart.allChecked
         },
         set (checked) {
           this.set_allChecked(checked)
           this.set_all_single_checked(checked)
           this.calc_total()
         }
       }
  },
  components: { MyTabbar, CommonHead }
}
</script>

<style lang="scss" scoped>
.wrap{
  margin-top: 46px;
  margin-bottom: 100px;
  .item{
    display: flex;
    background-color: #fafafa;
    .van-checkbox{
      margin: 0 8px;
    }
    .van-card{
      flex: 1;
    }
  }
  .delete-button {
    height: 100%;
  }
  .van-submit-bar{
    bottom: 50px;
  }
}
</style>
